<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>写一个宏任务示例_并讲解什么是宏任务</title>
</head>
<body>
  <script>
    // 宏任务:包含执行整体的js代码、事件回调(DOM事件)，XHR回调(异步请求，接口回调)，定时器
    // (setTimeoutlsetIntervallsetlmmediate-->node环境)，IO (input和output，文件的读出和写入等)操作，
    //事件队列，Ul render

    console.log('start')
    setTimeout(() => {
      console.log('setTimeout')
    }, 0)
    new Promise((resolve, reject) => {
      for (var i = 0; i < 5; i++) {
        console.log(i)
      }
      resolve()//修改 Promise 状态为成功
    }).then(() => {
      console.log('Promise 回调函数')
    })
    console.log('end')
    /**
     * 
     * 第一个宏任务 队列执行主线程上的代码
      第二个宏任务 setTimeout
      微任务队列 new Promise.then()
      1、先执行主线程上的同步代码，输出start
      2、遇到setTimeout将其加入到宏任务队列等待执行
      3、遇到promise立即执行．输出0.1.2，3，4
      4、遇到promise的回调函数将其加入到微任务队列
      5、执行主线程的同步代码，输出end
      6、第一个宏任务队列执行完毕查看存在微任务队列，执行微任务队列中的任务，输出promise的回调函数
      7、微任务执行完毕，执行下一个宏任务队列中的任务，输出setTimeout
     * 
    */
  </script>
</body>
</html>